<!--端口检测-->
<template>
  <div class="h-[100%] box-border w-[100%]">
    <el-card shadow="always">
      <el-form
        size="default"
        inline="true"
        label-width="auto"
        class="translate-y-2"
      >
        <el-form-item label="协议类型">
          <el-select
            v-model="dataParams.type"
            placeholder="请选择"
            clearable
            style="width: 240px"
          >
            <el-option label="解析协议" :value="1"></el-option>
            <el-option label="上报协议" :value="2"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button :icon="Refresh" type="primary" @click="getTempDataList"
            >搜索
          </el-button>
          <el-button :icon="Sunny" type="primary" @click="openDialog(`add`)"
            >添加
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <div class="main mt-2">
      <el-card class="cardData" style="width: 100%; height: 100%">
        <el-table
          height="65vh"
          :border="true"
          :data="dataList"
          v-loading="tableLoading"
          :cell-style="{ 'text-align': 'center' }"
          :header-cell-style="{ 'text-align': 'center' }"
        >
          <el-table-column prop="id" label="ID" width="150"></el-table-column>
          <el-table-column prop="name" label="协议名称" />
          <el-table-column prop="type" label="协议类型">
            <template #default="scope">
              <el-tag
                effect="light"
                style="width: 3vw"
                :type="scope.row.type === 1 ? 'success' : 'info'"
              >
                {{ scope.row.type === 1 ? "解析协议" : "上报协议" }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="220">
            <template #default="scope">
              <el-button :icon="Edit" @click="openDialog('edit', scope.row)"
                >编辑
              </el-button>
              <el-button
                :icon="Delete"
                type="danger"
                @click="deleteData(scope.row)"
                >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="flex justify-end w-[100%] mt-2">
          <el-pagination
            v-model:current-page="dataParams.pageNum"
            v-model:page-size="dataParams.pageSize"
            :page-sizes="[10, 20]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="dataTotal"
            @size-change="
              (number) => {
                getTempDataList();
              }
            "
            @current-change="
              (number) => {
                getTempDataList();
              }
            "
          />
        </div>
      </el-card>
    </div>
  </div>
  <el-dialog
    v-model="dialog.show"
    draggable
    class="myFrom"
    width="60vw"
    style="display: flex; flex-direction: column"
  >
    <template #header>
      <div
        style="
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
        "
      >
        <h3
          style="
            width: 200px;
            text-align: center;
            margin: 0;
            border: 0;
            padding: 0;
          "
        >
          {{ dialog.title }}
        </h3>
      </div>
    </template>

    <el-form :model="dialog.form" label-width="120px" ref="dialogForm">
      <el-form-item label="协议名称" prop="name">
        <el-input
          v-model="dialog.form.name"
          placeholder="请输入协议名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="协议类型" prop="type">
        <el-select v-model="dialog.form.type" placeholder="请选择协议类型">
          <el-option label="解析协议" :value="1" />
          <el-option label="上报协议" :value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="处理器代码" prop="dataHandlerCode">
        <v-ace-editor
          v-model:value="dialog.form.code!"
          style="width: 100%; height: 40vh; font-size: 16px; border: 1px solid"
          placeholder="请输入处理器代码"
          lang="javascript"
          theme="monokai"
          :options="options"
        />
      </el-form-item>
      <el-form-item label="处理方式" prop="dataHandlerNetWay">
        <el-select
          v-model="dialog.form.dataHandlerNetWay"
          placeholder="请选择处理方式"
        >
          <el-option label="HTTP" :value="1" />
          <el-option label="MQTT" :value="2" />
          <el-option label="TCP" :value="3" />
          <el-option :disabled="true" label="FTP" :value="4" />
          <el-option :disabled="true" label="RabbitMq" :value="5" />
        </el-select>
      </el-form-item>

      <el-form-item label="处理器类型" prop="dataHandlerType">
        <el-select
          v-model="dialog.form.dataHandlerType"
          placeholder="请选择处理器类型"
        >
          <el-option label="中置(数据收集)" :value="2" />
          <el-option label="前置" :value="1" />
          <el-option label="后置" :value="3" />
        </el-select>
      </el-form-item>

      <el-form-item
        v-if="dialog.form.dataHandlerNetWay === 2"
        label="url"
        prop="mqttUrl"
      >
        <el-input
          v-model="dialog.form.mqttUrl"
          placeholder="请输入MQTT URL"
        ></el-input>
      </el-form-item>

      <el-form-item
        v-if="dialog.form.dataHandlerNetWay === 2"
        label="主题"
        prop="mqttTopic"
      >
        <el-input
          v-model="dialog.form.mqttTopic"
          placeholder="请输入MQTT主题"
        ></el-input>
      </el-form-item>

      <el-form-item
        v-if="dialog.form.dataHandlerNetWay === 2"
        label="用户名"
        prop="mqttUserName"
      >
        <el-input
          v-model.trim="dialog.form.mqttUserName"
          placeholder="请输入MQTT用户名"
        ></el-input>
      </el-form-item>

      <el-form-item
        v-if="dialog.form.dataHandlerNetWay === 2"
        label="密码"
        prop="mqttPassword"
      >
        <el-input
          type="password"
          v-model.trim="dialog.form.mqttPassword"
          placeholder="请输入MQTT密码"
        ></el-input>
      </el-form-item>

      <el-form-item
        v-if="dialog.form.dataHandlerNetWay === 2"
        label="Qos"
        prop="mqttQos"
      >
        <el-select v-model="dialog.form.mqttQos" placeholder="请选择Qos">
          <el-option label="QoS0" :value="0" />
          <el-option label="QoS1" :value="1" />
          <el-option label="QoS2" :value="2" />
        </el-select>
      </el-form-item>

      <!-- http -->
      <el-form-item
        v-if="dialog.form.dataHandlerNetWay === 1"
        label="数据推送地址"
        prop="httpDataUrl"
      >
        <el-input
          v-model="dialog.form.httpDataUrl"
          placeholder="请输入url"
        ></el-input>
      </el-form-item>

      <el-form-item
        v-if="dialog.form.dataHandlerNetWay === 1"
        label="推送方式"
        prop="httpDataUrl"
      >
        <el-select
          v-model="dialog.form.httpDataWay"
          placeholder="请选择推送方式"
        >
          <el-option label="get" :value="1" />
          <el-option label="post" :value="2" />
        </el-select>
      </el-form-item>
      <el-form-item
        v-if="dialog.form.dataHandlerNetWay === 1"
        label="Token获取url"
        prop="httpUrlTokenUrl"
      >
        <el-input
          v-model.trim="dialog.form.httpUrlTokenUrl"
          placeholder="请输入url，没有不填"
        ></el-input>
      </el-form-item>

      <el-form-item
        v-if="dialog.form.dataHandlerNetWay === 1"
        label="Token获取方式"
        prop="httpUrlTokenWay"
      >
        <el-select
          v-model="dialog.form.httpUrlTokenWay"
          placeholder="请选择请求方式，，没有不填"
        >
          <el-option label="get" :value="1" />
          <el-option label="post" :value="2" />
        </el-select>
      </el-form-item>

      <el-form-item
        v-if="dialog.form.dataHandlerNetWay === 1"
        label="Token请求参数"
        prop="httpUrlTokenGetParams"
      >
        <v-ace-editor
          style="width: 100%; height: 20vh; font-size: 16px; border: 1px solid"
          placeholder="请输入token请求参数"
          v-model:value="dialog.form.httpUrlTokenGetParams!"
          lang="javascript"
          theme="monokai"
          :options="options"
        />
      </el-form-item>

      <el-form-item
        v-if="dialog.form.dataHandlerNetWay === 3"
        label="IP"
        prop="tcpDataIp"
      >
        <el-input
          v-model="dialog.form.tcpDataIp"
          placeholder="请输入TCP数据IP地址"
        ></el-input>
      </el-form-item>

      <el-form-item
        v-if="dialog.form.dataHandlerNetWay === 3"
        label="端口"
        prop="tcpDataPort"
      >
        <el-input
          v-model.number="dialog.form.tcpDataPort"
          placeholder="请输入TCP数据端口"
        ></el-input>
      </el-form-item>

      <el-form-item label="额外信息" prop="otherInfo">
        <v-ace-editor
          style="width: 100%; height: 20vh; font-size: 16px; border: 1px solid"
          v-model:value="dialog.form.otherInfo!"
          lang="json"
          placeholder="请输入额外信息"
          theme="monokai"
          :options="options"
        />
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button
          :icon="CloseBold"
          @click="dialogStatusInfo.forwardDialog = false"
          >关闭
        </el-button>
        <el-button :icon="Check" type="primary" @click="addOrEditDataHandler">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from "vue";

import { ElMessage, ElLoading } from "element-plus";
import {
  Delete,
  Refresh,
  Sunny,
  CloseBold,
  Check,
  Edit,
  Switch,
} from "@element-plus/icons-vue";
import { getListAPI, addAPI, updateAPI, deleteAPI } from "@/api/temp";
import type {
  ResolverHandlerTempParams,
  ResolverHandlerTemp,
} from "@/model/temp";
import { VAceEditor } from "vue3-ace-editor";
import { Ace } from "ace-builds";

/**
 * 公共数据
 */
const tableLoading = ref(false);
const addForm = ref();
//弹窗修改状态信息
const dialogStatusInfo = ref({
  isAdd: true,
  forwardDialog: false,
  title: "",
});

/**
 * 新增|编辑弹窗
 */
const dialog = ref<{
  title: string;
  show: boolean;
  loading: boolean;
  form: any;
}>({
  title: "新增协议板",
  show: false,
  loading: false,
  form: {},
});

/**
 * 弹窗打开函数
 */
const options: Partial<Ace.EditorOptions> = reactive({
  useWorker: true, // 启用语法检查,必须为true
  enableBasicAutocompletion: true, // 自动补全
  enableLiveAutocompletion: true, // 智能补全
  enableSnippets: true, // 启用代码段
  showPrintMargin: false, // 去掉灰色的线，printMarginColumn
  highlightActiveLine: true, // 高亮行
  highlightSelectedWord: true, // 高亮选中的字符
  tabSize: 4, // tab锁进字符
  fontSize: 14, // 设置字号
  wrap: false, // 是否换行
  readonly: false, // 是否可编辑
  // minLines: 10, // 最小行数，minLines和maxLines同时设置之后，可以不用给editor再设置高度
  // maxLines: 50, // 最大行数
});

function openDialog(type: "add" | "edit", data?: any) {
  dialog.value.title = type === "add" ? "新增协议" : "编辑协议";
  dialog.value.show = true;
  dialog.value.form = type === "add" ? {} : { ...data! };
}

/**
 * 转发数据获取*************************
 */
//数据列表
const dataList = ref([]);
const dataTotal = ref(0);
//数据查询参数
const dataParams = ref<ResolverHandlerTempParams>({
  pageSize: 10,
  pageNum: 1,
  type: undefined,
});
const getTempDataList = async () => {
  tableLoading.value = true;
  const res = await getListAPI(dataParams.value);
  if (res.data.list == null) {
    dataList.value = [];
  } else {
    dataList.value = res.data.list;
  }
  dataTotal.value = res.data.total;
  tableLoading.value = false;
};
/**
 * 转发数据记录添加
 */

/**
 * 新增|修改处理器
 */
async function addOrEditDataHandler() {
  dialog.value.loading = true;
  const fun = dialog.value.title === "新增协议" ? addAPI : updateAPI;
  // @ts-ignore
  const res = await fun({ ...dialog.value.form }).finally(() => {
    dialog.value.loading = false;
  });
  if (res.code === 200) {
    ElMessage.success(
      dialog.value.title === "新增协议" ? "新增成功" : "修改成功"
    );
  }
  getTempDataList();
  dialog.value.show = false;
}

/**
 * 转发记录删除
 */
const deleteData = async (row: any) => {
  const res = await deleteAPI(row.id);
  if (res.code == 200) {
    ElMessage.success("删除成功");
  } else {
    ElMessage.error(res.data);
  }
  getTempDataList();
};

/**
 *  周期钩子函数********************************
 */

onMounted(() => {
  getTempDataList();
  console.log("端口转发页面加载", this);
});
</script>

<style scoped>
.container {
  box-sizing: border-box;
  height: 100%;
}

::v-deep(.el-table .success) {
  background-color: #e9ffdb;
}

::v-deep(.el-table .fail) {
  background-color: #ffc87c;
}

[type="file"] {
  color: red;
  /* font-size: 0; */
}

/* 主按钮的样式自定义 */
::file-selector-button {
  height: 2.5rem;
  color: #fff;
  border-radius: 0.25rem;
  border: 1px solid #2a80eb;
  padding: 0.75rem 1rem;
  background-color: #2a80eb;
  cursor: pointer;
}

::-ms-browse {
  height: 3rem;
  color: #fff;
  border-radius: 0.25rem;
  border: 1px solid #2a80eb;
  padding: 0.75rem 1rem;
  background-color: #2a80eb;
  cursor: pointer;
}

.page {
  position: absolute;
  bottom: 10px;
  left: 400px;
}

/*
.cardData {
  position: relative;
  height: 95%;
} */

.card {
  /* width: 80vw; */
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.card2 {
  height: 80px;
  width: 200px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.isActive {
  background-color: red;
  color: bisque;
}

.header {
  /* background-color: rgb(240, 240, 240); */
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 10%;
}

.main {
  display: flex;
  height: 90%;
}

.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}

.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
</style>
